<template>
	<view class="container">
		<view class="transfer-form">
			<view class="form-item">
				<text class="label">转赠水量</text>
				<view class="input-wrapper">
					<input type="number" v-model="amount" placeholder="请输入转赠水量" />
					<text class="unit">L</text>
				</view>
			</view>
			
			<view class="form-item">
				<text class="label">接收用户</text>
				<view class="input-wrapper">
					<input type="text" v-model="receiverPhone" placeholder="请输入接收用户手机号" />
				</view>
			</view>
			
			<view class="available-amount">
				<text>可用水量：{{availableAmount}}L</text>
			</view>
			
			<button class="submit-btn" @click="handleTransfer">确认转赠</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			amount: '',
			receiverPhone: '',
			availableAmount: 1000
		}
	},
	methods: {
		handleTransfer() {
			if (!this.amount || !this.receiverPhone) {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none'
				})
				return
			}
			
			if (this.amount > this.availableAmount) {
				uni.showToast({
					title: '转赠水量不能超过可用水量',
					icon: 'none'
				})
				return
			}
			
			uni.showModal({
				title: '确认转赠',
				content: `确认向${this.receiverPhone}转赠${this.amount}L水量？`,
				success: (res) => {
					if (res.confirm) {
						// TODO: 调用转赠API
						uni.showToast({
							title: '转赠成功',
							icon: 'success'
						})
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx;
	background: #f5f5f5;
	min-height: 100vh;
}

.transfer-form {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	
	.form-item {
		margin-bottom: 30rpx;
		
		.label {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
			display: block;
		}
		
		.input-wrapper {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #eee;
			padding-bottom: 10rpx;
			
			input {
				flex: 1;
				font-size: 32rpx;
			}
			
			.unit {
				font-size: 28rpx;
				color: #666;
				margin-left: 10rpx;
			}
		}
	}
	
	.available-amount {
		text-align: right;
		margin-bottom: 40rpx;
		
		text {
			font-size: 26rpx;
			color: #666;
		}
	}
	
	.submit-btn {
		background: #1890ff;
		color: #fff;
		border-radius: 8rpx;
		font-size: 32rpx;
		height: 88rpx;
		line-height: 88rpx;
		
		&:active {
			opacity: 0.8;
		}
	}
}
</style>
